<template>
	<div>
		<fm-generate-form
			:data="jsonData"
			:remote="remoteFuncs"
			:value="editData"
			ref="generateForm"
		>
		</fm-generate-form>
		<el-button type="primary" @click="handleSubmit">提交</el-button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			jsonData: {
				list: [
					{
						type: 'input',
						icon: 'icon-input',
						options: {
							width: '100%',
							defaultValue: '',
							required: true,
							dataType: 'number',
							pattern: '',
							placeholder: '',
							disabled: false,
							remoteFunc: 'func_1647568754000_90709',
						},
						name: '单行文本',
						key: '1647568789000_13689',
						model: 'input_1647568754000_90709',
						rules: [
							{ type: 'number', message: '单行文本格式不正确' },
							{ required: true, message: '单行文本必须填写' },
						],
					},
					{
						type: 'input',
						icon: 'icon-input',
						options: {
							width: '100%',
							defaultValue: '',
							required: true,
							dataType: 'number',
							pattern: '',
							placeholder: '',
							disabled: false,
							remoteFunc: 'func_1647568754000_90709',
						},
						name: '单行文本',
						key: '1647568790000_49353',
						model: 'input_1647568754000_90709',
						rules: [
							{ type: 'number', message: '单行文本格式不正确' },
							{ required: true, message: '单行文本必须填写' },
						],
					},
					{
						type: 'input',
						icon: 'icon-input',
						options: {
							width: '100%',
							defaultValue: '',
							required: true,
							dataType: 'number',
							pattern: '',
							placeholder: '',
							disabled: false,
							remoteFunc: 'func_1647568754000_90709',
						},
						name: '单行文本',
						key: '1647568791000_86784',
						model: 'input_1647568754000_90709',
						rules: [
							{ type: 'number', message: '单行文本格式不正确' },
							{ required: true, message: '单行文本必须填写' },
						],
					},
					{
						type: 'input',
						icon: 'icon-input',
						options: {
							width: '100%',
							defaultValue: '',
							required: true,
							dataType: 'number',
							pattern: '',
							placeholder: '',
							disabled: false,
							remoteFunc: 'func_1647568754000_90709',
						},
						name: '单行文本',
						key: '1647568754000_90709',
						model: 'input_1647568754000_90709',
						rules: [
							{ type: 'number', message: '单行文本格式不正确' },
							{ required: true, message: '单行文本必须填写' },
						],
					},
					{
						type: 'cascader',
						icon: 'icon-jilianxuanze',
						options: {
							defaultValue: [],
							width: '',
							placeholder: '',
							disabled: false,
							clearable: false,
							remote: true,
							remoteOptions: [],
							props: { value: 'value', label: 'label', children: 'children' },
							remoteFunc: 'func_1647568795000_90441',
						},
						name: '级联选择器',
						key: '1647568795000_90441',
						model: 'cascader_1647568795000_90441',
						rules: [],
					},
					{
						type: 'date',
						icon: 'icon-date',
						options: {
							defaultValue: '',
							readonly: false,
							disabled: false,
							editable: true,
							clearable: true,
							placeholder: '',
							startPlaceholder: '',
							endPlaceholder: '',
							type: 'date',
							format: 'yyyy-MM-dd',
							timestamp: false,
							required: false,
							width: '',
							remoteFunc: 'func_1647569899000_18964',
						},
						name: '日期选择器',
						key: '1647569899000_18964',
						model: 'date_1647569899000_18964',
						rules: [],
					},
					{
						type: 'switch',
						icon: 'icon-switch',
						options: {
							defaultValue: false,
							required: false,
							disabled: false,
							remoteFunc: 'func_1647569903000_10590',
						},
						name: '开关',
						key: '1647569903000_10590',
						model: 'switch_1647569903000_10590',
						rules: [],
					},
					{
						type: 'text',
						icon: 'icon-wenzishezhi-',
						options: {
							defaultValue: 'This is a text',
							customClass: '',
							remoteFunc: 'func_1647569905000_96978',
						},
						name: '文字',
						key: '1647569905000_96978',
						model: 'text_1647569905000_96978',
						rules: [],
					},
				],
				config: { labelWidth: 100, labelPosition: 'right', size: 'small' },
			},
			editData: {},
			remoteFuncs: {
				func_1647568795000_90441(resolve) {
					// 级联选择器 cascader_1647568795000_90441
					// Call callback function once get the data from remote server
					// resolve(data)
				},
			},
		}
	},
	methods: {
		handleSubmit() {
			this.$refs.generateForm
				.getData()
				.then((data) => {
					// data check success
					// data - form data
				})
				.catch((e) => {
					// data check failed
				})
		},
	},
}
</script>